<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="~{common/header :: commonHead}">
    <title>审核小票自助积分</title>
</head>
<style>
    #orgId {
        z-index: 999 !important;
    }

    .id_option {
        z-index: 999 !important;
    }

    .form-control {
        height: auto !important;
    }
</style>
<link href="/css/plugins/cropper/cropper.min.css" rel="stylesheet">
<link href="/css/boxImg.css" type="text/css" rel="stylesheet">
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>审核小票自助积分</h5>
                    <div class="ibox-tools">
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-2"></div>
                        <div class="col-sm-4">
                            <div style="text-align: center; margin-bottom: 10px">
                                <button onclick="sizeP()" class="btn btn-default btn-circle" title="放大"><i class="fa fa-search-plus"></i></button>
                                <button onclick="rotateL()" class="btn btn-default btn-circle" title="向左旋转"><i class="fa fa-rotate-left"></i></button>
                                <button onclick="rotateR()" class="btn btn-default btn-circle" title="向右旋转"><i class="fa fa-rotate-right"></i></button>
                                <button onclick="sizeD()" class="btn btn-default btn-circle" title="缩小"><i class="fa fa-search-minus"></i></button>
                            </div>
                            <div class="mask-layer-imgbox auto-img-center" style="height: 600px">
                                <p style="text-align: center">
                                    <img th:src="${editable?.imgUrl}" alt="小票图片">
                                </p>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <form class="row form-body form-horizontal m-t" method="post" action="/self_help_integral/edit">
                                <div class="col-md-12 droppable sortable ui-droppable ui-sortable">
                                    <div class="form-group draggable ui-draggable dropped" style="display: none">
                                        <label class="col-sm-3 control-label">用户手机号：</label>
                                        <div class="col-sm-4">
                                            <input type="text" name="selfHelpIntegralId"
                                                   th:value="${editable?.selfHelpIntegralId}">
                                        </div>
                                    </div>
                                    <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                        <label class="col-sm-3 control-label">用户手机号：</label>
                                        <div class="col-sm-6">
                                            <input type="text" name="phone" th:value="${editable?.phone}"
                                                   class="form-control" required="required" placeholder="请输入用户手机号" readonly>
                                        </div>
                                    </div>
                                    <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                        <label class="col-sm-3 control-label">小票号：</label>
                                        <div class="col-sm-6">
                                            <input type="text"
                                                   name="ticketNum" th:value="${editable?.ticketNum}" class="form-control"
                                                    placeholder="请输入小票号">
                                        </div>
                                    </div>
                                    <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                        <label class="col-sm-3 control-label">金额：</label>
                                        <div class="col-sm-6">
                                            <input type="text" name="money" th:value="${editable?.money}"
                                                   class="form-control"  placeholder="请输入金额" required="required">
                                        </div>
                                    </div>
                                    <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                        <label class="col-sm-3 control-label">消费时间：</label>
                                        <div class="col-sm-6">
                                            <div class="input-group date">
                                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                <input style="z-index:0" readonly type="text" placeholder="选择消费时间"
                                                      class="form-control" id="start_date" name="consumeDay"
                                                       th:value="${editable?.consumeDay}" required
                                                       autocomplete="off" >
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                        <label class="col-sm-3 control-label">选择商户：</label>
                                        <div class="col-sm-6">
                                            <select required id="orgId" name="storeId" data-placeholder="请选择商户..."
                                                    class="chosen-select form-control m-b" tabindex="1">
                                                <option value="">--请选择--</option>
                                                <option class="id_option" hassubinfo="true"
                                                        th:each="storeInfoDTOs:${storeInfoDTO.getStoreDTOS()}"
                                                        th:value="${storeInfoDTOs.id}"
                                                        th:text="${storeInfoDTOs.storeFloor}+'  ' +${storeInfoDTOs.storeNum}+'  '+${storeInfoDTOs.storeName}"></option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                        <label class="col-sm-3 control-label">审核状态：</label>
                                        <div class="col-sm-6">
                                            <select name="applicationStatus" class="form-control">
                                                <option value="reviewing">审核中</option>
                                                <option value="successpass">通过</option>
                                                <option value="failpass">未通过</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                        <label class="col-sm-3 control-label">审核备注：</label>
                                        <div class="col-sm-6">

                                            <select name="remarkApplication" class="form-control">
                                                <option value="审核通过">审核通过</option>
                                                <option value="您上传的POS单无法辨识店铺信息，请上传清晰完整的消费小票。(JFKM-1）">您上传的POS单无法辨识店铺信息，请上传清晰完整的消费小票。(JFKM-1）</option>
                                                <option value="您上传消费的店铺不参与商场积分。（JFKM-2">您上传消费的店铺不参与商场积分。（JFKM-2）</option>
                                                <option value="您上传的照片未拍摄出店铺名称日期/金额/交易号（条形码下方），请您重新拍照上传。（JFKM-3）">您上传的照片未拍摄出店铺名称日期/金额/交易号（条形码下方），请您重新拍照上传。（JFKM-3）</option>
                                                <option value="您上传的购物小票拍摄不清晰，请您重新拍照上传。（JFKM-4）">您上传的购物小票拍摄不清晰，请您重新拍照上传。（JFKM-4）</option>
                                                <option value="请上传水游城购物小票（包含店铺名称、消费日期、消费金额）。（JFKM-5）">请上传水游城购物小票（包含店铺名称、消费日期、消费金额）。（JFKM-5）</option>
                                                <option value="您上传的购物小票已参与积分，无法进行重复积分，请谅解。（JFKM-6）">您上传的购物小票已参与积分，无法进行重复积分，请谅解。（JFKM-6）</option>
                                                <option value="您上传的发票联无法积分，请上传清晰完整的消费小票（含店铺名称、日期、金额）。（JFKIM-7）">您上传的发票联无法积分，请上传清晰完整的消费小票（含店铺名称、日期、金额）。（JFKIM-7）</option>
                                                <option value="自助积分上传小票有效期为15天，您已超过有效积分期限。（JFKM-8）">自助积分上传小票有效期为15天，您已超过有效积分期限。（JFKM-8）</option>
                                                <option value="您上传的购物小票使用储值卡支付/消费券支付，无法积分，请谅解。（JFKIM-9）">您上传的购物小票使用储值卡支付/消费券支付，无法积分，请谅解。（JFKIM-9）</option>
                                                <option value="您上传的金宝贝合同无法辨识消费金额，请将金额描写清晰后重新上传。（JFKIM-10）">您上传的金宝贝合同无法辨识消费金额，请将金额描写清晰后重新上传。（JFKIM-10）</option>
                                                <option value="您上传的小票为储值卡签购联，不参与商场积分。（JFKM-11）">您上传的小票为储值卡签购联，不参与商场积分。（JFKM-11）</option>
                                                <option value="储值卡充值时已积过分，消费时不予累计积分，请谅解。（JFKM-12）">储值卡充值时已积过分，消费时不予累计积分，请谅解。（JFKM-12）</option>
                                                <option value="店铺购物小票为充值储值卡，无法积分，消费时上传小票可积分，请谅解（JFKM-13）">店铺购物小票为充值储值卡，无法积分，消费时上传小票可积分，请谅解（JFKM-13）</option>
                                                <option value="请您上传带有店铺名称、店铺号和开票金额的小票，请谅解。（JFKM-14）">请您上传带有店铺名称、店铺号和开票金额的小票，请谅解。（JFKM-14）</option>
                                                <option value="CGV积分比例为五十比一，您上传的小票金额不足，请谅解。（JFKM-15）">CGV积分比例为五十比一，您上传的小票金额不足，请谅解。（JFKM-15）</option>
                                                <option value="儿童项目的积分比例为二十比一，您上传的小票金额不足，请谅解。（JFKM-16）">儿童项目的积分比例为二十比一，您上传的小票金额不足，请谅解。（JFKM-16）</option>
                                                <option value="请您分开上传购物小票进行积分，请谅解。（JFKM-17）">请您分开上传购物小票进行积分，请谅解。（JFKM-17）</option>
                                                <option value="您上传的储值卡联无法积分，请您带购买储值卡的黄色积分联至一楼服务台进行积分，感谢您的配合。（JFKM-18）">您上传的储值卡联无法积分，请您带购买储值卡的黄色积分联至一楼服务台进行积分，感谢您的配合。（JFKM-18）</option>
                                                <option value="照片内容无水游城内店铺小票。（JFKM-19）">照片内容无水游城内店铺小票。（JFKM-19）</option>

                                            </select>
                                        </div>
                                    </div>

                                    <div class="hr-line-dashed" style="margin-top: 100px"></div>

                                    <div class="form-group draggable ui-draggable">
                                        <div class="col-sm-12 col-sm-offset-3">
                                            <button class="btn btn-primary" id="submitBtn">提交</button>
                                        </div>
                                    </div>

                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/js/plugins/cropper/cropper.min.js"></script>

<script th:inline="javascript">

    $(function () {
        let isError = [[${isError}]];
        if (isError) layer.msg("小票号重复，请重新填写", {icon: 11, time: 3000, shade: [0.5, '#000', true]});
    })

    $(function () {
        $("input[name=endtime]").datepicker({});
        $("#orgId").comboSelect();
        let error = [[${error}]];
        if (null != error) {
            layer.alert(error)
            // window.history.back(-1);
        }
    });

    initCropper();
    function initCropper() {
        $('#ticketImg > img').cropper({
            checkImageOrigin: false,
            rotatable: true,
            background: false,
            modal: false,
            guides: false,
            highlight: false,
            autoCrop: false
        });
    }
    //图片居中显示
    var box_width = $(".auto-img-center").width(); //图片盒子宽度
    var box_height = $(".auto-img-center").height();//图片高度高度
    var initial_width = $(".auto-img-center img").width();//初始图片宽度
    var initial_height = $(".auto-img-center img").height();//初始图片高度
    if (initial_width < initial_height) {
        $(".auto-img-center img").css("height", box_height);
        /* var last_imgHeight = $(".auto-img-center img").height();
         $(".auto-img-center img").css("margin-top", -(last_imgHeight - box_height) / 2);*/
    } else {
        $(".auto-img-center img").css("width", box_width);
        // var last_imgWidth = $(".auto-img-center img").width();
        // $(".auto-img-center img").css("margin-left", -(last_imgWidth - box_width) / 2);
    }

    //图片拖拽
    var $div_img = $(".mask-layer-imgbox p");
    $div_img.css('top','0px');
    //绑定鼠标左键按住事件
    $div_img.bind("mousedown", function (event) {
        event.preventDefault && event.preventDefault(); //去掉图片拖动响应
        //获取需要拖动节点的坐标
        var offset_x = $(this)[0].offsetLeft;//x坐标
        var offset_y = $(this)[0].offsetTop;//y坐标
        //获取当前鼠标的坐标
        var mouse_x = event.pageX;
        var mouse_y = event.pageY;
        //绑定拖动事件
        //由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素
        $(".mask-layer-imgbox").bind("mousemove", function (ev) {
            // 计算鼠标移动了的位置
            var _x = ev.pageX - mouse_x;
            var _y = ev.pageY - mouse_y;
            //设置移动后的元素坐标
            var now_x = (offset_x + _x) + "px";
            var now_y = (offset_y + _y) + "px";
            //改变目标元素的位置
            $div_img.css({
                top: now_y,
                left: now_x
            });
        });
    });
    //当鼠标左键松开，接触事件绑定
    $(".mask-layer-imgbox").bind("mouseup", function () {
        $(this).unbind("mousemove");
    });

    //缩放
    var zoom_n = 1;
    function sizeP() {
        zoom_n += 0.1;
        $(".mask-layer-imgbox img").css({
            "transform": "scale(" + zoom_n + ")",
            "-moz-transform": "scale(" + zoom_n + ")",
            "-ms-transform": "scale(" + zoom_n + ")",
            "-o-transform": "scale(" + zoom_n + ")",
            "-webkit-": "scale(" + zoom_n + ")"
        });
    }
    function sizeD() {
        zoom_n -= 0.1;
        console.log(zoom_n)
        if (zoom_n <= 0.1) {
            zoom_n = 0.1;
            $(".mask-layer-imgbox img").css({
                "transform": "scale(.1)",
                "-moz-transform": "scale(.1)",
                "-ms-transform": "scale(.1)",
                "-o-transform": "scale(.1)",
                "-webkit-transform": "scale(.1)"
            });
        } else {
            $(".mask-layer-imgbox img").css({
                "transform": "scale(" + zoom_n + ")",
                "-moz-transform": "scale(" + zoom_n + ")",
                "-ms-transform": "scale(" + zoom_n + ")",
                "-o-transform": "scale(" + zoom_n + ")",
                "-webkit-transform": "scale(" + zoom_n + ")"
            });
        }
    }
    //旋转
    var spin_n = 0;
    function rotateR() {
        spin_n += 15;
        $(".mask-layer-imgbox img").parent("p").css({
            "transform": "rotate(" + spin_n + "deg)",
            "-moz-transform": "rotate(" + spin_n + "deg)",
            "-ms-transform": "rotate(" + spin_n + "deg)",
            "-o-transform": "rotate(" + spin_n + "deg)",
            "-webkit-transform": "rotate(" + spin_n + "deg)"
        });
    }
    function rotateL() {
        spin_n -= 15;
        $(".mask-layer-imgbox img").parent("p").css({
            "transform": "rotate(" + spin_n + "deg)",
            "-moz-transform": "rotate(" + spin_n + "deg)",
            "-ms-transform": "rotate(" + spin_n + "deg)",
            "-o-transform": "rotate(" + spin_n + "deg)",
            "-webkit-transform": "rotate(" + spin_n + "deg)"
        });
    }
</script>
</body>
</html>